<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
      <router-link to="/link1">链接1</router-link>
      <router-link to="/link2">链接2</router-link>
      <!-- 通过 router-view 设置路由内容的出口 -->
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
    <script>
      // 1. 定义链接显示内容
      const Link1 = {
        template: `<h1>链接1 内容</h1>`,
      };
      const Link2 = {
        template: `<h1>链接2 内容</h1>`,
      };
      // 2. 定义路由规则
      const routes = [
        {
          path: '/link1',
          component: Link1,
        },
        {
          path: '/link2',
          component: Link2,
        },
      ];
      // 3. 生成路由实例
      let router = new VueRouter({
        // routes:routes
        routes,
      });
      //   console.log(VueRouter);
      let vm = new Vue({
        router,
        el: '#app',
      });
    </script>
  </body>
</html>
